import { useEffect } from 'react'
import { Image, View } from '@tarojs/components'
import classnames from 'classnames'
import { Overlay } from '@/components'
import { ossUrl } from '@/utils/config'
import './index.scss'

/**
 * @description: dialog 组件
 * @param {*} children slot
 * @param {*} show 显示隐藏 默认隐藏
 * @param {*} overlay 遮罩层 默认显示
 * @param {*} close 关闭函数 空函数
 * @param {*} hasCloseIcon 是否显示关闭按钮 默认显示
 * @param {*} closeOnClickOverlay 点击遮罩是否可关闭 默认可以
 * @param {*} customClass 自定义类名 
 */
const Dialog = ({ children, show, overlay, close, hasCloseIcon, closeOnClickOverlay, customClass }) => {
  useEffect(() => {
    console.log(show)
  }, [show])
  const renderClose = () => {
    return (
      <View className='dialog_header size_700 size_32 lh_48 relative flex flex_j_flex_end pd_r_40 pd_t_40'>
        <Image className='close' src={ossUrl + '/defaultClose.png'} onClick={close}></Image>
      </View>
    )
  }
  return (
    <View className={classnames('dialog', show ? '' : 'none')}>
      {overlay && show && <Overlay close={closeOnClickOverlay && close} />}
      <View className={classnames('dialog_center fixed max_height_full bg_fff ov_hidden radius_32 pd_b_40', customClass)}>
        {hasCloseIcon && renderClose()}
        {children}
      </View>
    </View>
  )
}
Dialog.defaultProps = {
  show: false,
  hasCloseIcon: true,
  overlay: true,
  close: () => { },
  closeOnClickOverlay: true
}
export default Dialog
